<template>
  <el-container>
    <el-button type="primary" @click="addRootMenu">增加根节点</el-button>
    <el-tree
        ref="treeRef"
        :data="treeData"
        show-checkbox
        node-key="id"
        :default-expanded-keys="[2, 3]"
        :default-checked-keys="[5]"
        :props="treeOptions"
    >
      <template #default="{ node, data }">
        <el-dropdown trigger="contextmenu">
        <span class="custom-tree-node">
          <span>
            <e-icon :icon-name="data.menuIcon"/>
            {{ node.label }}
          </span>
          <!--      一条json数据对应树的一个节点     -->

        </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="CirclePlus" v-if="data.pId==0" @click="addMenu(data.id)">新增</el-dropdown-item>
              <el-dropdown-item :icon="EditPen"  @click="updateMenu(data.id)">修改</el-dropdown-item>
              <el-dropdown-item :icon="CircleClose" v-if="data.children.length == 0" @click="deleteMenu(data.id)">删除</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>

      </template>
    </el-tree>




<!--   添加/修改菜单 -->
    <el-dialog
        v-model="dialogVisible"
        :title="dialogTitle"
        width="30%"
    >
      <el-form
          label-position="right"
          label-width="100px"
          :model="menuFormModel"
          style="max-width: 460px"
      >

        <el-form-item label="id" v-if="menuFormModel.id!=null">
          <el-input v-model="menuFormModel.id" disabled/>
        </el-form-item>
        <el-form-item label="菜单名字">
          <el-input v-model="menuFormModel.menuName" />
        </el-form-item>
        <el-form-item label="菜单路径">
          <el-input v-model="menuFormModel.menuUrl" />
        </el-form-item>
        <el-form-item label="菜单图标">
          <e-icon-picker v-model="menuFormModel.menuIcon"/>
        </el-form-item>
        <el-form-item label="菜单权限标识">
          <el-input v-model="menuFormModel.permissionTag" />
        </el-form-item>
        <el-form-item label="父菜单id" v-if="menuFormModel.id==null" >
          <el-input v-model="menuFormModel.pId" disabled/>
        </el-form-item>
      </el-form>



      <template #footer>
      <span class="dialog-footer">
        <el-button :type="buttonOpt.type" @click="submitData">
            {{buttonOpt.label}}
        </el-button>
      </span>
      </template>
    </el-dialog>
  </el-container>

</template>

<script setup>
import {
  Check,
  CirclePlus,
  CircleClose,
  EditPen
} from '@element-plus/icons-vue'
import {ElMessage} from 'element-plus'

import {getMenuTree,getMenuById,updateMenuAPI,deleteMenuByIdAPI,addMenuAPI} from "@/api/sys/menuapi"
import {onMounted, ref} from "vue";

// ====== 树形结果展示 ============
const treeOptions = {
  children: 'children',
  label: 'menuName', //树每个节点显示哪个字段
  // disabled: ''
  // isLeaf: ''
  // class: ''
}


const treeData = ref([]);
const refreshTree = ()=>{
  return  getMenuTree().then(resp => {
    treeData.value = resp.data.data;
  })
}
onMounted(() => {
  refreshTree();
})

// ======= 添加菜单
const dialogVisible = ref(false);
const dialogTitle = ref("");
const buttonOpt = ref({
  type:"primary",
  label: "确认新增"
});

//弹框的表单，需要回显
const menuFormModel = ref({
  id: null,
  menuName: "",
  menuUrl: null,
  menuIcon: "fa fa-user",
  permissionTag: "",
  pId: null
});
const addMenu = (id)=>{
  dialogTitle.value = "新增菜单";
  buttonOpt.value = {
    type:"primary",
    label: "确认新增"
  }
  dialogVisible.value = true;
  menuFormModel.value = {
    pId: id
  };

}

//修改菜单
const updateMenu = (id)=>{
  //设置样式
  dialogTitle.value = "修改菜单";
  buttonOpt.value = {
    type:"success",
    label: "确认更新"
  }
  dialogVisible.value = true;

  //发送请求查询到当前菜单具体值
  getMenuById(id).then(resp=>{
    menuFormModel.value = resp.data.data;
  })

}

//删除菜单
const deleteMenu = (id)=>{
  deleteMenuByIdAPI(id).then(resp=>{
    ElMessage.success("删除成功")
    refreshTree();
  })
}
const treeRef = ref();
//增加根菜单
const  addRootMenu = ()=>{
  dialogVisible.value = true;
  buttonOpt.value = {
    type: "danger",
    label: "增加根节点"
  }
  dialogTitle.value = "增加根节点"

  menuFormModel.value = {
    pId: 0
  }

}


//提交菜单新增/修改
const submitData = ()=>{
    console.log("准备提交的数据：",menuFormModel.value)
  if(menuFormModel.value.id == null){

    addMenuAPI(menuFormModel.value).then(resp=>{
      ElMessage.success("新增成功");
      refreshTree().then(()=>{
        //
        //TODO 传入你刚才操作的id。 自己找id，展开即可
        treeRef.value.setCurrentKey(menuFormModel.value.pId,true)
      })

    })



  }else {
    updateMenuAPI(menuFormModel.value)
        .then(resp=>{
           ElMessage.success("更新成功");
          refreshTree().then(()=>{
            //TODO 传入你刚才操作的id。 自己找id，展开即可
            treeRef.value.setCurrentKey(menuFormModel.value.id,true)
          });
        });
  }

  //操作完成后关闭dialog 和刷新树
  dialogVisible.value = false;

  //(key/data, checked, deep) 接收三个参数: 1. 要选中的节点的 key 或者数据 2. 一个布尔类型参数表明是否选中. 3. 一个布尔类型参数表明是否递归选中子节点

}



</script>

<style scoped>
.el-container {
  display: flex;
  flex-direction: column;
}
</style>
